<template>
    <div class="container-content">
        <div class="container-content-title">{{ $t('platform.setting.games.title') }}
            <div class="flex" v-if="gameListStatus == 'dle'">
<!--                <el-button type="text" class="p-0" @click="dialogUpdate">{{ $t('action.edit') }}</el-button>-->
            </div>
        </div>
        <component-page-loading :status="gameListStatus" @reload="getGameList" v-if="gameListStatus != 'dle'"></component-page-loading>
        <el-form label-width="180px" class="detail" v-else>
            <el-form-item :label="$t('platform.setting.games.title')">
                <div v-if="data.games.length > 0">
                    <el-tag v-for="(code, index) in data.games" :key="index" effect="plain" size="mini" type="info" class="mr-1">
                        <component-page-games :game-code="code"></component-page-games>
                    </el-tag>
                </div>
                <div v-else>
                    <el-tag v-for="(game, index) in gameList" :key="index" effect="plain" size="mini" type="info" class="mr-1">
                        <component-page-games :game-code="game.code"></component-page-games>
                    </el-tag>
                </div>
            </el-form-item>
        </el-form>
        <el-dialog :title="$t('platform.setting.games.title')" width="440px" :visible.sync="dialog.visible.update">
            <div class="px-12" style="min-height: 260px">
                <el-form :model="dataCache" label-position="top">
                    <el-form-item :error="Boolean(msg.errors['games']) ? msg.errors['games'][0] : ''">
                        <component-page-game-option v-model="dataCache.games" class="block"></component-page-game-option>
                        <el-alert :title="$t('platform.setting.games.desc')" :closable="false"
                                  type="warning" class="leading-normal mt-3 px-1">
                        </el-alert>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">{{ $t('action.confirm') }}</el-button>
                        <el-button @click="dialog.visible.update = false">{{ $t('action.cancel') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "PlatformGames",
    props: ['tree', 'config'],
    data() {
        return {
            gameListStatus: 'dle',
            gameList: [],
            data: {
                games: [],
            },
            dataCache: {},
            dialog: {
                visible: {
                    update: false,
                }
            },
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
        }
    },
    watch: {
        config: {
            deep: true,
            immediate: true,
            handler(n, o) {
                // 初始化数据
                this.data.games = n.games != null ? _.cloneDeep(n.games) : [];
            }
        },
    },
    created() {
        this.getGameList();
    },
    methods: {
        // 获取游戏数据
        getGameList() {
            this.gameListStatus = 'loading';
            axios.get('/common/getGameList').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.gameList = [].concat(...Object.values(response.data.resp_data));
                    this.gameListStatus = 'dle';
                } else {
                    this.gameListStatus = 'error';
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        // 显示模态框（编辑）
        dialogUpdate() {
            this.initMsg();
            // 缓存数据
            this.dataCache = _.cloneDeep(this.data);
            // 平台code
            this.dataCache.plat_code = this.tree.code;
            // 显示模态框
            this.dialog.visible.update = true;
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/setting/config/updateOrCreateByGames', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.edit')}),
                        showClose: true
                    });
                    // 更新数据
                    this.data.games = response.data.resp_data;
                    // 关闭模态框
                    this.dialog.visible.update = false;
                } else if (response.data.resp_msg.code == 42000) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.edit')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
